<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜鸟教程</title>
    <!--为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，
     需要在网页的 head 之中添加 viewport meta 标签-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.css" rel="stylesheet"/>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="container">
<!--导航开始-->



    <div class="row">

            <div class="navbar navbar-default " role="navigation">
                <div>
                    <ul class="nav navbar-nav" style="text-align: center;">
                        <li ><a href="index.html">首页</a></li>
                        <li><a href="prefect.html">精选</a></li>
                        <li><a href="ask.html">快问</a></li>
                        <li><a href="create.html">创作</a></li>
                        <li class="active"><a href="self.html">个人中心</a></li>
                        <!--<li><a href="faq.html">新手教程</a></li>-->
                    </ul>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="register.html"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
                    <li><a href="login.html"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
                </ul>
                <div class="nav navbar-nav navbar-right">
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">提交</button>
                    </form>
                </div>
            </div>

    </div>
<!--导航结束-->
<!--这里是位置导航 开始-->
<!--这里是平台的导航 结束-->
<!--这里是 内容区开始-->
<div class="row">

    <!--这里是展示区 开始-->
    <div class="col-md-8"  >
        <div class="panel panel-info" id="income">
            <div class="panel-heading">
                <h3 class="panel-title">
                    积分收入
                </h3>
            </div>
            <table data-toggle="table" id="incometab" >
                <thead>
                <tr>

                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Tanmay</td>
                    <td>Bangalore</td>
                    <td>560001</td>
                    <td>
                        560001
                    </td>
                </tr>
                <tr>
                    <td>Tanmay</td>
                    <td>Bangalore</td>
                    <td>560001</td>
                    <td>
                        560001
                    </td>
                </tr>
                <tr>
                    <td>Tanmay</td>
                    <td>Bangalore</td>
                    <td>560001</td>
                    <td>
                        560001
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="panel panel-info" id="comsume" >
            <div class="panel-heading">
                <h3 class="panel-title">
                    积分消费
                </h3>
            </div>
            <table class="table table-condensed">
                <thead>
                <tr>
                    <th>名称</th>
                    <th>城市</th>
                    <th>邮编</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Tanmay</td>
                    <td>Bangalore</td>
                    <td>560001</td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm">详请</button>
                    </td>
                </tr>
                <tr>
                    <td>Sachin</td>
                    <td>Mumbai</td>
                    <td>400003</td>
                    <td>
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary btn-sm">详请</button>

                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Uma</td>
                    <td>Pune</td>
                    <td>411027</td>
                    <td>
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary btn-sm">详请</button>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="panel panel-info" id="recharge" >
            <div class="panel-heading">
                <h3 class="panel-title">
                    充值记录
                </h3>
            </div>
            <table class="table table-condensed">
                <thead>
                <tr>
                    <th>名称</th>
                    <th>城市</th>
                    <th>邮编</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Tanmay</td>
                    <td>Bangalore</td>
                    <td>560001</td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm">详请</button>
                    </td>
                </tr>
                <tr>
                    <td>Sachin</td>
                    <td>Mumbai</td>
                    <td>400003</td>
                    <td>
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary btn-sm">详请</button>

                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Uma</td>
                    <td>Pune</td>
                    <td>411027</td>
                    <td>
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary btn-sm">详请</button>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="panel panel-info" id="withdraw" >
            <div class="panel-heading">
                <h3 class="panel-title">
                    提现记录
                </h3>
            </div>
            <table class="table table-condensed">
                <thead>
                <tr>
                    <th>名称</th>
                    <th>城市</th>
                    <th>邮编</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Tanmay</td>
                    <td>Bangalore</td>
                    <td>560001</td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm">详请</button>
                    </td>
                </tr>
                <tr>
                    <td>Sachin</td>
                    <td>Mumbai</td>
                    <td>400003</td>
                    <td>
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary btn-sm">详请</button>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Uma</td>
                    <td>Pune</td>
                    <td>411027</td>
                    <td>
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary btn-sm">详请</button>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="panel panel-info" id="accountset" >
            <div class="panel-heading">
                <h3 class="panel-title">
                    账号设置
                </h3>
            </div>
        </div>
    </div>
    <div class="col-md-4" >

              <div class="panel panel-default" >
                  <div class="row">
                      <div class="col-md-6" style="text-align: right;">
                          <img src="static/mark.png" class="img-responsive img-circle" style="margin: auto"    alt="Cinque Terre">
                      </div>
                      <div class="col-md-6" style="margin: auto">
                          <h3 class="title">改变自己</h3>
                      </div>
                  </div>
                  <div class="row" >
                      <div class="col-md-12" style="text-align: center">
                        <h4 class="title">积分：5000(500元)</h4>
                        <p class="btn btn-default btn-sm">充值</p>
                        <p class="btn btn-default btn-sm">提现</p>
                      </div>
                  </div>
                </div>
        <div class="panel panel-default" >
            <div class="panel-heading">
                <div class="panel-title">
                    <h3 class="title">个人信息管理</h3>
                </div>
            </div>
            <div class="panel-body">
                <ul class="nav nav-pills nav-stacked">
                    <li class="active" name="menu"><a href="javascript:void(0);" id="incomebtn">积分收入</a></li>
                    <li name="menu"><a href="javascript:void(0);" id="comsumebtn">积分消费</a></li>
                    <li name="menu"><a href="javascript:void(0);" id="rechargebtn">充值记录</a></li>
                    <li name="menu"><a href="javascript:void(0);" id="withdrawbtn">提现记录</a></li>
                    <li name="menu"><a href="javascript:void(0);" id="accountsetbtn">账户设置</a></li>
                </ul>
            </div>
        </div>


    </div>
    <!--这里是展示区 结束-->
</div>
<!--这里是 内容区结束-->

    <!--这里是页脚 开始-->
    <div class="copyright">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <span>Copyright &copy; <a href=http://www.golaravel.com/ >Laravel 中文网</a></span> | <span><a href=http://www.miibeian.gov.cn/ target=_blank>京ICP备11008151号</a></span> | <span>京公网安备11010802014853</span>
                </div>
            </div>
        </div>
    </div>
    <!--这里是页脚 结束-->

</div>
</body>
<script type="text/javascript">
    $(document).ready(function () {
        console.log("is here");
        $("#comsume").hide();
        $("#recharge").hide();
        $("#withdraw").hide();
        $("#accountset").hide();
        $("#incomebtn").click(function(){
            income();
        });
        $("#comsumebtn").click(function () {
            comsume();
        });
        $("#rechargebtn").click(function () {
            recharge();
        });
        $("#withdrawbtn").click(function () {
            withdraw();
        });
        $("#accountsetbtn").click(function () {
            accountset();
        });

    });
    function income() {
        console.log("click income");
        $("a[name='menu']").each(function(){
            console(this.html());
        })
        $("#income").show();
        $("#comsume").hide();
        $("#recharge").hide();
        $("#withdraw").hide();
        $("#accountset").hide();
    }
    function comsume() {
        console.log("click consumer");
        $("#income").hide();
        $("#comsume").show();
        $("#recharge").hide();
        $("#withdraw").hide();
        $("#accountset").hide();
    }
    function recharge() {
        console.log("click recharge");
        $("#income").hide();
        $("#comsume").hide();
        $("#recharge").show();
        $("#withdraw").hide();
        $("#accountset").hide();
    }
    function withdraw() {
        console.log("click withdraw");
        $("#income").hide();
        $("#comsume").hide();
        $("#recharge").hide();
        $("#withdraw").show();
        $("#accountset").hide();
    }
    function accountset() {
        console.log("click accountset");
        $("#income").hide();
        $("#comsume").hide();
        $("#recharge").hide();
        $("#withdraw").hide();
        $("#accountset").show();
    }

    var $table = $('#incometab');
    $table.bootstrapTable({
        url: "duoBaoActivityList",
        dataType: "json",
        pagination: true, //分页
        singleSelect: false,
        search:true, //显示搜索框
        sidePagination:"server", //服务端处理分页
        columns:[
        {
            title: '活动名称',
            field: 'name',
            align: 'center',
            valign: 'middle'
        },
        {
            title: '状态',
            field: 'status',
            align: 'center',
            valign: 'middle',
        },
        {
            title: '参与人数',
            field: 'participationCounts',
            align: 'center'
        },
        {
            title: '总人数',
            field: 'totalCounts',
            align: 'center'
        },
        {
            title: '开始时间',
            field: 'startTime',
            align: 'center',
        },
        {
            title: '操作',
            field: 'id',
            align: 'center',
            formatter:function(value,row,index){
                var e = '<a href="#" mce_href="#" onclick="edit(\''+ row.id + '\')">编辑</a> ';
                var d = '<a href="#" mce_href="#" onclick="del(\''+ row.id +'\')">删除</a> ';
                return e+d;
            }
        }
    ]
    });

</script>
<style>
    .copyright {
        background: #444;
        font-size: 13px;
        text-align: center;
        color: #999;
        padding: 20px 0;
        margin: 0 auto;
    }

</style>
</html>